<template>
	<mu-appbar style="width: 100%;" color="primary">
		<mu-button @click="open = !open" icon slot="left">
			<mu-icon value="menu"></mu-icon>
		</mu-button>
		{{ title }}
		<mu-avatar color="indigo">
			<mu-icon value="account_circle"></mu-icon>
		</mu-avatar>
		<mu-menu slot="right">
			<mu-button flat>MENU</mu-button>
			<mu-list slot="content">
				<mu-list-item button>
					<mu-list-item-content>
						<mu-list-item-title>Menu Item 1</mu-list-item-title>
					</mu-list-item-content>
				</mu-list-item>
				<mu-list-item button>
					<mu-list-item-content>
						<mu-list-item-title>Menu Item 2</mu-list-item-title>
					</mu-list-item-content>
				</mu-list-item>
			</mu-list>
		</mu-menu>
		<mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
			<mu-list>
				<mu-list-item button>
					<mu-list-item-title>Menu Item 1</mu-list-item-title>
				</mu-list-item>
				<mu-list-item button>
					<mu-list-item-title>Menu Item 2</mu-list-item-title>
				</mu-list-item>
				<mu-list-item @click="open = false" button>
					<mu-list-item-title>Close</mu-list-item-title>
				</mu-list-item>
			</mu-list>
		</mu-drawer>
	</mu-appbar>
</template>

<script>
export default {
	name: "AppBar",
	data() {
		return {
			docked: false,
			open: false,
			position: 'left'
		}
	},
	props: ['title', 'color', 'textColor', 'z-depth'],
}
</script>

<style scoped>

</style>